<template>
	<div class="navs">
		<el-container>

			<el-aside width="200px">
				<template>
					<Logo></Logo>
				</template>
				<el-menu :default-openeds="['1', '5']">
					<el-submenu index="1" >
						<template slot="title"><i class="el-icon-s-home"></i>
							<span @click="jumpcomment">首页</span>
						</template>
					</el-submenu>
					<el-submenu index="2">
						<template slot="title"><i class="el-icon-s-claim"></i>预约管理</template>
						<el-menu-item-group>
							<el-menu-item index="1-1" @click="jumpnumber">
								预约挂号
								<!-- <router-link to="/number"> 预约挂号</router-link> -->
							</el-menu-item>
							<el-menu-item index="1-2" @click="jumptest">预约核酸检测</el-menu-item>
							<el-menu-item index="1-3" @click="jumpbody">预约体检</el-menu-item>
							<el-menu-item index="1-4" @click="jumpdoctor">医生排班</el-menu-item>
						</el-menu-item-group>
					</el-submenu>

					<el-submenu index="3">
						<template slot="title"><i class="el-icon-s-shop"></i>费用管理</template>
						<el-menu-item-group>
							<el-menu-item index="1-1" @click="doorbuy">门诊消费记录</el-menu-item>
							<el-menu-item index="1-2" @click="dooradd">门诊充值记录</el-menu-item>
							<el-menu-item index="1-3" @click="homebuy">住院消费记录</el-menu-item>
							<el-menu-item index="1-4" @click="homeadd">住院充值记录</el-menu-item>
							<el-menu-item index="1-5" @click="jumpsend">病案配送记录</el-menu-item>
							<el-menu-item index="1-6" @click="jumpreturn">退款记录</el-menu-item>
						</el-menu-item-group>
					</el-submenu>

					<el-submenu index="4">
						<template slot="title"><i class="el-icon-s-comment"></i>医院信息</template>
						<el-menu-item-group>
							<el-menu-item index="1-1" @click="doctormanage">医生管理</el-menu-item>
							<el-menu-item index="1-2" @click="homemanage">科室管理</el-menu-item>
							<el-menu-item index="1-3">体检套餐</el-menu-item>
							<el-menu-item index="1-4">健康百科</el-menu-item>
							<el-menu-item index="1-5">医院导航</el-menu-item>
							<el-menu-item index="1-6">医院简介</el-menu-item>
							<el-menu-item index="1-7">预约须知</el-menu-item>
							<el-menu-item index="1-8">病案配送须知</el-menu-item>
							<el-menu-item index="1-9">用户反馈管理</el-menu-item>
						</el-menu-item-group>
					</el-submenu>

					<el-submenu index="5">
						<template slot="title"><i class="el-icon-s-tools"></i>系统管理</template>
						<el-menu-item-group>
							<el-menu-item index="1-1">管理员管理</el-menu-item>
							<el-menu-item index="1-2">角色管理</el-menu-item>
							<el-menu-item index="1-3">职称管理</el-menu-item>
							<el-menu-item index="1-4">健康百科</el-menu-item>
							<el-menu-item index="1-5">消息公告</el-menu-item>
							<el-menu-item index="1-6">修改密码</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</el-menu>
			</el-aside>

			<el-container>
				<el-header style="text-align: right; font-size: 12px">
					<el-dropdown>
						<div class="header">
							<img class="head" src="https://img1.baidu.com/it/u=3937859636,1338774617&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="">
							<img class="online" src="../assets/imgs/online.svg" alt="">
						</div>

						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>修改密码</el-dropdown-item>
							<el-dropdown-item>推出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<span>李坚强</span>
				</el-header>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>

	</div>
</template>

<script>
import Logo from './Logo.vue';
export default {
	name: 'Navs',
	components:{Logo},
	methods:{
		jumpcomment(){
			if(this.$route.name!='comment'){
				this.$router.push('/comment')
			}
        },
		jumpnumber(){
			if(this.$route.name!='number'){
				this.$router.push('/number')
			}
        },
		jumptest(){
			if(this.$route.name!='test'){
				this.$router.push('/test')
			}
        },
		jumpbody(){
			if(this.$route.name!='body'){
				this.$router.push('/body')
			}
        },
		jumpdoctor(){
			if(this.$route.name!='doctor'){
				this.$router.push('/doctor')
			}
        },
		doorbuy(){
			if(this.$route.name!='doorbuy'){
				this.$router.push('/doorbuy')
			}
        },
		dooradd(){
			if(this.$route.name!='dooradd'){
				this.$router.push('/dooradd')
			}
        },
		homebuy(){
			if(this.$route.name!='homebuy'){
				this.$router.push('/homebuy')
			}
        },
		homeadd(){
			if(this.$route.name!='homeadd'){
				this.$router.push('/homeadd')
			}
        },
		jumpsend(){
			if(this.$route.name!='send'){
				this.$router.push('/send')
			}
        },
		jumpreturn(){
			if(this.$route.name!='return'){
				this.$router.push('/return')
			}
        },
		doctormanage(){
			if(this.$route.name!='doctormanage'){
				this.$router.push('/doctormanage')
			}
        },
		homemanage(){
			if(this.$route.name!='homemanage'){
				this.$router.push('/homemanage')
			}
        }
	}

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.navs {
	width: 100vw;
	height: 100vh;
}

.el-container {
	height: 100%;
	border: 1px solid rgb(238, 238, 238)
}

.el-header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	background-color: #fff;
	color: #333;
	height: 50px;
	box-shadow: 0px 5px 5px rgba(215, 215, 215, 0.349019607843137);
}

.header {
	position: relative;
	margin: 0px 15px;
}

.online {
	width: 10px;
	height: 10px;
	position: absolute;
	right: 0;
	bottom: 5px;
}

.head {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.el-dropdown {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: space-between;
}

.el-aside {
	height: 100%;
	color: #ffffff;
	background-color: rgba(0, 110, 255, 0.898039215686275);
}
::v-deep .el-menu-item-group{
	background-color: rgba(0, 110, 255, 0.898039215686275);
}
::v-deep .el-menu-item {
	color: #fff;
}
::v-deep .el-submenu__title {
	color: #fff;
}
.el-submenu__title i{
	color: #ffffff;
}
.el-main {
	height: 80%;
}

.el-container {
	border-bottom: 0;
}

.el-aside::-webkit-scrollbar {
	width: 0;
}

.el-card__body {
	padding: 0px;
}

.el-main {
	overflow-y: auto;
	padding: 10px 20px 10px;
	box-sizing: border-box;
	background-color: rgba(0, 110, 255, 0.0470588235294118);
}

.el-main::-webkit-scrollbar {
	height: 0;
}

.el-menu {
	border: 0;
   background-color: rgba(255, 255, 255, 0) !important;
}

::v-deep .el-menu-item:focus, .el-menu-item:hover{
	background-color: #3b70ff;
}
::v-deep .el-submenu__title:hover{
	background-color: #3b70ff;
}
::v-deep .el-submenu__title i {
	color: #fff;
}
::v-deep .el-submenu__title {
	width: 200px;
    height: 50px;
    line-height: 50px;
    list-style: none;
}

</style>
